<template>
    <div>
        <h1>最新通知</h1>
        <a-table class="notification-table" :columns="columns" :data-source="data" :pagination="{ 'show-quick-jumper': true, 'show-size-changer': true }">
            <a slot="text" slot-scope="text, _, index" @click="openDetailWindow(index)">{{text}}</a>
            <span slot="date" slot-scope="date">{{date.getFullYear()}}-{{date.getMonth()+1}}-{{date.getDate()}}</span>
        </a-table>
        <div style="height: 20px"></div>
        <a-modal v-model="showDetail" title="通知" :footer="null">
            <div>{{detail.text}}</div>
            <div id="notification-modal-content"></div>
            <div>{{detail.author}}</div>
            <div>{{detail.date.getFullYear()}}-{{detail.date.getMonth()+1}}-{{detail.date.getDate()}}</div>
        </a-modal>
    </div>
</template>

<script>
    export default {
        name: "Notification",
        data: () => ({
            showDetail: false,
            detail: {
                text: '',
                author: '',
                date: new Date(),
            },
            columns: [
                {
                    title: '序号',
                    dataIndex: 'index',
                    key: 'index',
                },
                {
                    title: '标题',
                    dataIndex: 'text',
                    key: 'text',
                    scopedSlots: { customRender: 'text' },
                },
                {
                    title: '发布日期',
                    dataIndex: 'date',
                    key: 'date',
                    scopedSlots: { customRender: 'date' },
                },
            ],
            data: [
                {
                    key: 1,
                    index: 1,
                    text: '通知1',
                    date: new Date(),
                    content: '<h1><strong>5555</strong><em>55555</em><s>4444444<em><strong>33333<span class="marker">555555<span style="color:#f39c12">5555555</span></span></strong></em></s></h1>\n' +
                        '\n' +
                        '<hr />\n' +
                        '<hr />\n' +
                        '<h1><s>Ŷ&raquo;</s></h1>\n' +
                        '\n' +
                        '<hr />\n' +
                        '<table border="1" cellpadding="1" cellspacing="1">\n' +
                        '        <tbody>\n' +
                        '                <tr>\n' +
                        '                        <td>1</td>\n' +
                        '                        <td>2</td>\n' +
                        '                </tr>\n' +
                        '                <tr>\n' +
                        '                        <td>333</td>\n' +
                        '                        <td>4</td>\n' +
                        '                </tr>\n' +
                        '                <tr>\n' +
                        '                        <td>5</td>\n' +
                        '                        <td>6</td>\n' +
                        '                </tr>\n' +
                        '        </tbody>\n' +
                        '</table>\n' +
                        '\n' +
                        '<p>&nbsp;</p>',
                    author: '超级管理员',
                },
                {
                    key: 2,
                    index: 2,
                    text: '通知2',
                    date: new Date(),
                    content: 'Simple Content',
                    author: '何家麟',
                },
            ],
        }),
        methods: {
            openDetailWindow(index) {
                this.showDetail = true;
                this.detail.text = this.data[index].text;
                this.detail.author = this.data[index].author;
                this.detail.date = this.data[index].date;
                setTimeout(() => {
                    document.getElementById('notification-modal-content').innerHTML = this.data[index].content;
                }, 0);
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.$emit('route');
            });
        }
    }
</script>

<style scoped>

</style>
